<template>
  <el-form size="mini" inline :class="[{'hideCity': hideCity},{'hideArea': hideArea}]">
    <el-form-item label="省">
      <el-select v-model="provinceValue" placeholder="请选择" @change="onChangeProvince">
        <el-option v-for="item in provinceOptions" :key="item.code" :label="item.value"
                   :value="item.value"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="市" v-if="!hideCity">
      <el-select v-model="cityValue" placeholder="请选择" @change="onChangeCity">
        <el-option v-for="item in cityOptions" :key="item.code" :label="item.value"
                   :value="item.value"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="区" v-if="!hideArea && !hideCity">
      <el-select v-model="areaValue" placeholder="请选择" @change="onChangeArea">
        <el-option v-for="item in areaOptions" :key="item.code" :label="item.value"
                   :value="item.value"></el-option>
      </el-select>
    </el-form-item>
  </el-form>
</template>

<script type="text/ecmascript-6">
  import REGION from './districts'

  export default {
    props: {
      hideProvince: {
        type: Boolean
      },
      province: {
        type: String || Number
      },
      hideCity: {
        type: Boolean
      },
      city: {
        type: String || Number
      },
      hideArea: {
        type: Boolean
      },
      area: {
        type: String || Number
      }
    },
    data () {
      return {
        provinceOptions: [],
        cityOptions: [],
        areaOptions: [],
        region: [],
        provinceValue: this.province,
        cityValue: this.city,
        areaValue: this.area
      }
    },
    created () {
      let list = []
      let city = []
      let area = []
      for (let key in REGION['100000']) {
        list.push(this.getOption(key, REGION['100000'][key]))
      }
      this.provinceOptions = list
      if (!this.hideCity && this.province) {
        for (let item of list) {
          if (this.province === item.value) {
            this.region.push(item)
            for (let key in REGION[item.code]) {
              city.push(this.getOption(key, REGION[item.code][key]))
            }
          }
        }
        this.cityOptions = city
        if (!this.hideArea && this.city) {
          for (let item of city) {
            if (this.city === item.value) {
              this.region.push(item)
              for (let key in REGION[item.code]) {
                area.push(this.getOption(key, REGION[item.code][key]))
              }
            }
          }
          this.areaOptions = area
        }
      }
    },
    methods: {
      onChangeProvince () {
        let list = []
        let city = []
        for (let item of this.provinceOptions) {
          if (this.provinceValue === item.value) {
            list.push(item)
          }
        }
        for (let key in REGION[list[0].code]) {
          city.push(this.getOption(key, REGION[list[0].code][key]))
        }
        this.cityOptions = city
        this.cityValue = ''
        this.areaValue = ''
        this.region = list
        this.$emit('province', list[0])
        if (this.hideCity) {
          this.$emit('region', this.region)
        }
      },
      onChangeCity () {
        let list = {}
        for (let item of this.cityOptions) {
          if (this.cityValue === item.value) {
            list = item
          }
        }
        if (!this.hideArea) {
          let area = []
          for (let key in REGION[list.code]) {
            area.push(this.getOption(key, REGION[list.code][key]))
          }
          this.areaOptions = area
        } else {
          this.$emit('region', this.region)
        }
        if (this.region.length === 3) {
          this.region.pop()
        }
        this.areaValue = ''
        this.region[1] = list
        this.$emit('city', list)
      },
      onChangeArea () {
        let list = {}
        for (let item of this.areaOptions) {
          if (this.areaValue === item.value) {
            list = item
          }
        }
        this.region[2] = list
        this.$emit('region', this.region)
      },
      getOption (code, value) {
        return {code: code, value: value}
      }
    }
  }
</script>

<style lang="less" ref="stylesheet/less" scoped>
  .el-form {
    padding: 0;
    width: 100% !important;
    font-size: 0;
    border: none;

    .el-form-item {
      padding: 0;
      margin-bottom: 0;
      width: calc(33% - 10px);

      /deep/ .el-form-item__content {
        width: calc(100% - 26px);
      }
    }

    &.hideCity {
      .el-form-item {
        width: calc(100% - 10px);
      }
    }

    &.hideArea {
      .el-form-item {
        width: calc(50% - 10px);
      }
    }
  }
</style>
